<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			div {
				margin-top: 5px;
				margin-bottom: 20px;
				text-align: center;
			}

			ul {
				width: 200px;
				margin: 0 auto;
			}
		</style>
		<script src="data/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div>
			班级：
			<select name="class">
				<option value="0">1813</option>
				<option value="1">1811</option>
				<option value="2">1823</option>
			</select>
			学号：
			<select name="stu_id">
				<option value="0">101</option>
				<option value="1">102</option>
			</select>
			<input type="button" id="btn" value="查询" />
		</div>
		<ul>

		</ul>

		<script>
			$(function() {
				var classidx = 0,
					stuidx = 0;
				$("[name=class]").on("change", function() {
					classidx = $(this).val();
				})
				$("[name=stu_id]").on("change", function() {
					stuidx = $(this).val();
				})

				$("#btn").on("click", function() {
					$.ajax({
						url: 'student.json',
						type: 'get',
						dataType: 'json',
						success: function(data) {
							var name = data[classidx].students[stuidx].stu_name;
							var score = data[classidx].students[stuidx].score;

							$("ul").empty();
							$("ul").append("<li>" + name + "</li>");
							$("ul").append("<li>" + score + "分" + "</li>");

						}
					}) 
				})
			})
		</script>
	</body>
</html>
